<template>
    <view>
        <view class="page_top" :style="{ 'background': topNav ? 'white' : 'transparent', 'z-index': 199 }">
			<top-status></top-status>
			<view class="tabsBack">
				<view @click="goBack()" class="blackbox">
					<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1718776913451430.png"
							mode="widthFix" class="backimg"></image>
					<!-- <uni-icons :color="topNav ? 'black' : 'lightgray'" type="left" size="30"></uni-icons> -->
				</view>
				<view class="topTitle">{{ '积分提现兑换' }}</view>
			</view>
		</view>
        <view class="bgimg">
            <view class="scorebox" @click="nav_to('/pages/user/user_score')">
                <image class="GoldCoinimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1718777797209670.png"></image>
                <view class="userscore">{{userNums.Score?userNums.Score:'0'}}</view>
                <!-- <image class="rArrow" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1718777830355456.png"></image> -->
            </view>
            <view class="bg">
                <!-- <view class="Withdraw">
                    <view class="title_1">积分提现</view>
                    <view class="listbox">
                        <view class="content" v-for="(item,index) in list" :key="index" @click="scoreChange(item,index)" :class="isbg == index?'bg4':''">
                            <view class="title">{{item.title+'元'}}</view>
                            <view class="scorenum">{{item.scorenum}}</view>
                        </view>
                    </view>
                </view> -->

                <view class="VIPbox">
                    <view class="vip_title">兑换VIP会员</view>
                    <view class="viplist" v-for="(item,index) in listVIP" :key="index">
                        <image class="icon" :src="item.icon"></image>
                        <view class="vipmid">
                            <view class="title">{{item.title}}</view>
                            <view class="text">{{item.text}}</view>
                        </view>
                        <view class="vipbtn" @click="isScore(item.PValue,index)">
                            <image class="coin" :src="item.coin"></image>
                            <view class="sum">{{item.PValue+'兑换'}}</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>


        <view class="showrule" v-if="isclose">
			<view class="closeinvite">
				<view class="closetitle">兑换VIP会员</view>
				<view class="closetext">确认使用<text class="sumscore">{{sumcore+'积分'}}</text>兑换{{Type}}</view>
                <view class="text_2">积分一经使用不支持退换</view>
				<view class="bottombox">
					<view class="btn1"  @click="isclose = false">取消</view>
					<view class="btn2" @click="Exchange()">兑换</view>
				</view>
			</view>
		</view>
        <view class="showrule" v-if="isfclose">
			<view class="closeinvite">
				<view class="closetitle">积分不足</view>
				<view class="closetext2">积分余额不足，去积分中心做每日任务，赚取更多积分吧</view>
				<view class="bottombox">
					<view class="btn1"  @click="isfclose = false">知道了</view>
					<view class="btn2" @click="gotoTask()">去赚积分</view>
				</view>
			</view>
		</view>
    </view>
</template>

<script>
import topStatus from "@/components/topStatus/topStatus.vue";
export default {
components: {
    topStatus,
},
data() {
return {
    isbg:-1,
    isfclose:false,
    isclose:false,
    topNav:false,
    userNums:{},
    list:[
        {
            title:'1',
            scorenum:'1000积分'
        },
        {
            title:'3',
            scorenum:'3000积分'
        },
        {
            title:'5',
            scorenum:'5000积分'
        },
    ],
    listVIP:[
        {   
            id:1,
            title:'7天月卡会员',
            text:'加好友、加微信等权限',
            icon:'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17187874223581342.png',
            coin:'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1718777797209670.png',
            // sum:'1000'
        },
        {   
            id:5,
            title:'7天年卡会员',
            text:'加好友、加微信等权限',
            icon:'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1718787432291746.png',
            coin:'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1718777797209670.png',
            // sum:'2000'
        }
    ],
    sumcore:'',
    VIPtype:'',
    Type:'',
};
},
onLoad(){
    this.getusertype()
},
onShow(){
    this.getSaleChannelDetail()
},
onPageScroll: function (e) { //nvue暂不支持滚动监听，可用bindingx代替
	if (e.scrollTop > 210) {
		this.topNav = true
	} else {
		this.topNav = false
	}
},
methods: {
    //兑换列表
    async getusertype(){
        let res = await this.$api.post('member/getusertype')
        if(res.code == 0){
            res.data.map((item) => {
				this.listVIP.map((list, index) => {
					if (item.ID == list.id) {
						this.listVIP[index] = {
							...list,
							...item
						}
					}
				})
			})
            this.listVIP = [...this.listVIP]
        }
    }
,    //积分提现
    async scoreChange(item,index){
        this.isbg = index
        let _this = this
        uni.showModal({
			title: '温馨提示',
			content: '确定使用'+item.scorenum+'提现'+item.title+'元',
			confirmText: '确定',
			success: async function(rs) {
				if (rs.confirm) {
					let d = await _this.$api.post('/SaleChannel/ChangeBalance', {
			            Money: item.title,
			            CommissionType: '礼物收入'
		            });
                    if(d.code == 0){
                        _this.$pv.msg('提现成功');
                    }
					
				} else if (rs.cancel) {

				}
			}
		});
    },
    gotoTask(){
        this.nav_to('/pages/court/score')
        this.isfclose = false
    },

    //积分是否足够
    isScore(sum ,index){
        if(this.userNums.Score > sum){
            this.isclose = true
            if(index == 0){
                this.sumcore =sum
                this.Type = '月卡会员'
                this.VIPtype = '金卡会员'
            }else{
                this.sumcore =sum
                this.Type = '年卡会员'
                this.VIPtype = '黑年卡会员'
            }
            
        }else{
            this.isfclose = true
        }
        
    },
    //兑换会员
    async Exchange(){
        // this.isclose = false
        let res = await this.$api.post('Member/Exchange',{
            UserType:this.VIPtype
        })
        if(res.code == 0){
            this.$pv.msg('兑换成功');
            this.getSaleChannelDetail()
            this.isclose = false
        }
    },

    goBack(){
        uni.navigateBack();
    },
    async getSaleChannelDetail() {
		let res = await this.$api.post('/SaleChannel/SaleChannelDetail', {
			CompanyID: 6003
		});
		this.userNums = res.data;
	},
},
}
</script>
<style lang='scss'>
.page_top {
	position: fixed;
	top: 0;
	left: 0;
	width: 750rpx;
	box-sizing: border-box;
	transition: 0.3s all;
}

.tabsBack {
	height: 44px;
	padding-left: 32rpx;
	display: flex;
	align-items: center;
	z-index: 999;

	.topTitle {
		font-weight: bold;
		font-size: 36rpx;
		color: #333333;
        flex: 1;
        text-align: center;
	}

	.blackbox {
		// width: 52rpx;
		// height: 52rpx;
		// display: flex;
		// align-items: center;
        .backimg{
            width: 36rpx;
            height: 36rpx;
            vertical-align: middle;
        }
	}
}
.bgimg{
    background-image: url('https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1718776593916474.png');
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 682rpx;
    position: relative;
    // overflow: hidden;
    padding-top: 260rpx;
    box-sizing: border-box;
    .scorebox{
        width: 300rpx;
        display: flex;
        align-items: center;
        margin-left: 24rpx;
        .GoldCoinimg{
            width: 64rpx;
            height: 64rpx;
            display: block;
        }
        .userscore{
            font-size: 72rpx;
            font-weight: bold;
            color: #553526;
        }
        .rArrow{
            width: 32rpx;
            height: 32rpx;
            margin-left: 8rpx;
        }
    }
}
.bg{
    // width: 702rpx;
    background: #fff;
    border-radius: 32rpx;
    margin: 0 auto;
    margin-top: 24rpx;
    padding: 40rpx 32rpx;
    box-sizing: border-box;
    .Withdraw{
        margin-bottom: 48rpx;
        .title_1{
            font-size: 36rpx;
            font-weight: bold;
            color: #333333;
            margin-bottom: 24rpx;
        }
        .listbox{
            display: flex;
            justify-content: space-around;
            .bg4{
                background-color: rgba(0,0,0,0.2) !important;
            }
            .content{
                width: 208rpx;
                height: 128rpx;
                background: #FFFFFF;
                border-radius: 16rpx;
                border: 2rpx solid #E1E1E1;
                text-align: center;
                padding: 20rpx;
                box-sizing: border-box;
                .title{
                    font-size: 36rpx;
                    font-weight: bold;
                    color: #333333;
                    margin-bottom: 8rpx;
                }
                .scorenum{
                    font-size: 24rpx;
                    color: #999999;
                }
            }
        }
    }
    .VIPbox{
        .vip_title{
            
            font-size: 36rpx;
            font-weight: bold;
            color: #333333;
            margin-bottom: 24rpx;
        }
        .viplist{
            width: 686rpx;
            height: 176rpx;
            background: linear-gradient( 134deg, #FEF9EF 0%, #FFF4E3 100%);
            border-radius: 24rpx;
            border: 2rpx solid #FFE4C3;
            display: flex;
            align-items: center;
            justify-content: space-around;
            margin-bottom: 24rpx;
            .icon{
                width: 152rpx;
                height: 112rpx;
            }
            .vipmid{
                .title{
                    font-size: 32rpx;
                    font-weight: bold;
                    color: #381F0B;
                    margin-bottom: 10rpx;
                }
                .text{
                    font-size: 24rpx;
                    color: #C2875B;
                }
            }
            .vipbtn{
                width: 186rpx;
                height: 64rpx;
                background: linear-gradient( 94deg, #FF9D58 0%, #FB432F 100%);
                border-radius: 36rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                .coin{
                    width: 32rpx;
                    height: 32rpx;
                }
                .sum{
                    font-size: 24rpx;
                    font-weight: bold;
                    color: #fff;
                }
            }
        }
    }
}

.showrule{
			position: absolute;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100%;
			background-color: rgba(0,0,0,0.5);
		}
.closeinvite{
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
			width: 600rpx;
			height: 416rpx;
			background: linear-gradient( 180deg, #FEEDED 0%, #FFFFFF 100%);
			border-radius: 32rpx;
			border: 4rpx solid #FFFFFF;
			padding: 48rpx 40rpx;
			box-sizing: border-box;
			text-align: center;
			.closetitle{
				font-size: 36rpx;
				font-weight: bold;
				color: #333333;
				margin-bottom: 32rpx;
			}
			.closetext{
				font-size: 28rpx;
				color: #333333;
				margin-bottom: 16rpx;
			}
            .closetext2{
				font-size: 28rpx;
				color: #333333;
				margin-bottom: 82rpx;
			}
            .sumscore{
                color: #FC4724;
                font-size: 32rpx;
            }
            .text_2{
                font-size: 28rpx;
                color: #999999;
                margin-bottom: 48rpx;
            }
			.bottombox{
				display: flex;
				.btn1{
					width: 248rpx;
					height: 88rpx;
					border-radius: 48rpx;
					border: 2rpx solid #FC4724;
					text-align: center;
					line-height: 88rpx;
					color: #FC4724;
					font-size: 32rpx;
					font-weight: bold;
				}
				.btn2{
					width: 248rpx;
					height: 88rpx;
					background: linear-gradient( 94deg, #FC8A43 0%, #FC341B 100%);
					border-radius: 48rpx;
					text-align: center;
					line-height: 88rpx;
					color: #fff;
					font-size: 32rpx;
					font-weight: bold;
					margin-left: 24rpx;
				}
			}
		}
</style>